<template>
    <p class="g-name">{{goods.name}}</p>
    <p class="g-desc">{{goods.desc}}</p>
    <p class="g-price">
        <span>{{goods.price}}</span>
        <span>{{goods.oldPrice}}</span>
    </p>
    <div class="g-service">
        <dl>
            <dt>促销</dt>
            <dd>12月好物放送，App领券购买直降120元</dd>
        </dl>
        <dl>
            <dt>配送</dt>
            <dd>至
                <XtxCity @sendLastAddress="getLastAddress" :fullLocation="fullLocation" />
            </dd>
        </dl>
        <dl>
            <dt>服务</dt>
            <dd>
                <span>无忧退货</span>
                <span>快速退款</span>
                <span>免费包邮</span>
                <a href="javascript:;">了解详情</a>
            </dd>
        </dl>
    </div>
</template>

<script>
    import { reactive } from 'vue-demi'
    import { toRefs } from 'vue'
    export default {
        name: 'GoodName',
        props: {
            goods: {
                type: Object,
                default: () => {}
            }
        },
        setup(props) {
            // 未登录前，使用默认地址
            const address = reactive({
                provinceCode: '110000',
                cityCode: '119900',
                countyCode: '110101',
                fullLocation: '北京市 市辖区 东城区'
            })
            // 登录后，使用用户的默认地址
            if (props.goods.userAddresses) {
                const userDefaultAddress = props.goods.userAddresses.find(uItem => uItem.isDefault === 1)
                if (userDefaultAddress) {
                    for (let key in address) {
                        address[key] = userDefaultAddress[key]
                    }
                }
            }
            // 接收最终地址
            const getLastAddress = (addressInfo) => {
                // console.log('最终地址', addressInfo);
                for (let key in address) {
                    address[key] = addressInfo[key]
                }
                console.log('提交地址参数', address);
            }
            return {
                ...toRefs(address),
                getLastAddress
            }
        }
    }
</script>

<style lang="less" scoped>
    .g-name {
        font-size: 22px
    }

    .g-desc {
        color: #999;
        margin-top: 10px;
    }

    .g-price {
        margin-top: 10px;

        span {
            &::before {
                content: "¥";
                font-size: 14px;
            }

            &:first-child {
                color: @priceColor;
                margin-right: 10px;
                font-size: 22px;
            }

            &:last-child {
                color: #999;
                text-decoration: line-through;
                font-size: 16px;
            }
        }
    }

    .g-service {
        background: #f5f5f5;
        width: 500px;
        padding: 20px 10px 0 10px;
        margin-top: 10px;

        dl {
            padding-bottom: 20px;
            display: flex;
            align-items: center;

            dt {
                width: 50px;
                color: #999;
            }

            dd {
                color: #666;

                &:last-child {
                    span {
                        margin-right: 10px;

                        &::before {
                            content: "•";
                            color: @xtxColor;
                            margin-right: 2px;
                        }
                    }

                    a {
                        color: @xtxColor;
                    }
                }
            }
        }
    }
</style>